import { Box, Divider, LegacyCard, ResourceItem, ResourceList, Text, VerticalStack } from "@shopify/polaris";

const ReportTestConfiguration = ({ reportTestConfigurationData }) => {

    const renderItem = (item, id) => {
        return (
            <ResourceItem id={id}>
                <Text variant="bodySm" fontWeight="bold">{item.heading}</Text>
                <Box paddingBlockStart={1}>
                    {item.component ? item.component : <Text variant="bodySm">{item.description}</Text>}
                </Box>
            </ResourceItem>
        )
    }

    return (
        <VerticalStack gap="2">
            {reportTestConfigurationData?.general && reportTestConfigurationData.general.length > 0 && (
                <LegacyCard>
                    <Box paddingBlockEnd={4} background="bg-subdued">
                        <LegacyCard.Header title={(<Text variant="headingSm">General</Text>)}/>
                    </Box>
                    <Divider />
                    <ResourceList
                        items={reportTestConfigurationData.general}
                        renderItem={renderItem}
                    />
                </LegacyCard>
            )}

           {reportTestConfigurationData?.testRole && reportTestConfigurationData.testRole.length > 0 && (
                <LegacyCard>
                    <Box paddingBlockEnd={4} background="bg-subdued">
                        <LegacyCard.Header title={(<Text variant="headingSm">Test role</Text>)}/>
                    </Box>
                    <Divider />
                    <ResourceList
                        items={reportTestConfigurationData.testRole}
                        renderItem={renderItem}
                    />
                </LegacyCard>
            )}

            {reportTestConfigurationData?.advanced && reportTestConfigurationData.advanced.length > 0 && (
                <LegacyCard>
                    <Box paddingBlockEnd={4} background="bg-subdued">
                        <LegacyCard.Header title={(<Text variant="headingSm">Advanced</Text>)}/>
                    </Box>
                    <Divider />
                    <ResourceList
                        items={reportTestConfigurationData.advanced}
                        renderItem={renderItem}
                    />
                </LegacyCard>
            )}
        </VerticalStack>
        
    )

}

export default ReportTestConfiguration;
